<template>
<el-container class="guanli">
  <el-main>
    <back></back>
    <ul v-show="haveMsg">
      <li v-for="(item,key) in list" :key="item.id">
        <span>
          <img :src="item.url" alt="">
        </span>
        <span>
          <p><i>下单时间:</i><b>{{item.createTime}}</b></p>
          <p><i>订单号:</i><b>{{item.orderNo}}</b></p>
          <p><i>规格:</i><b v-for="i in item.standard" :key="i">{{i}}</b></p>
        </span>
        <span>
          <i v-if="item.whetherQuited == 1" style="color: #DCDFE6;font-size: 14px">已下架</i>
          <i v-if="item.whetherQuited == 0" style="color: red;font-size: 14px">展示中</i>
          <strong v-if="item.whetherQuited == 1" style="background: #DCDFE6" >下架</strong>
          <strong v-if="item.whetherQuited == 0" style="background: #f00" @click="open(item.id)">下架</strong>
        </span>
      </li>
      <span>
        <p>加载完成</p>
      </span>
    </ul>
    <ul v-show="!haveMsg">
      <p style="color: #666;margin-top: 40px;font-size: 16px">暂无数据</p>
    </ul>
  </el-main>
</el-container>
</template>

<script>
  import back from '@/components/back'
  import qs from 'qs'
    export default {
    inject:['reload'],
        data(){
          return{
            list:[],
            haveMsg:false,

          }
        },
      methods:{
        open(val){
          this.$confirm('该广告还未到期，下架后此广告将不会在用户端展示，并且广告费用不退回，确定下架吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showClose:false,
            roundButton:true,
            customClass:'guanliMessageBox',
            type: 'warning'
          }).then(() => {

            let params = {
              orderId:val
            }
            this.$axios.post('/api/front/order/remove',qs.stringify(params))
              .then(res => {
               if(res.data.status != 200){
                 this.$message.warning('当前访问量过多，请稍后重试')
               }else {
                 this.$message({
                   type: 'success',
                   message: '删除成功!'
                 });
                 this.reload();
               }

              })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      computed:{
        id(){
          return this.$store.state.merchantId
        }
      },
      created(){
        this.id = localStorage.getItem("merchantId");
      },
      mounted(){

        let params = {
          merchantId:this.id,
        };
        this.$axios.post('/api/front/order/adList',qs.stringify(params))
          .then(res => {
            if(res.data.obj.list == ''){
              this.haveMsg = false
            }else {
              this.haveMsg = true
              this.list = res.data.obj.list;
            }

          })
      },
      components:{
      back,
      }
    }
</script>

<style scoped lang="scss">
.guanli{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #DCDFE6;
  .el-main{
    ul>li{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      background: #fff;
      margin: 10px 0;
      padding: 10px 0;
      box-shadow: 2px 2px 4px #ccc;
      span{
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:nth-child(1){
          img{
            width: 70px;
            height: 70px;
            border-radius: 4px;
          }
        }
        &:nth-child(2){
          text-align: left;
          p{
            margin: 0;
            padding: 5px 0;
            i{
              margin-right: 10px;
            }
          }
        }
        &:nth-child(3){
          justify-content: space-around;
          strong{
            padding: 5px 15px;
            border-radius: 16px;
            color: #fff;
            font-weight: normal;
          }
        }
      }
      &+span{
       display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 20px;
        p{
          color: #666;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
